<template>
	<view  class="home" id="guide-container">
        <navbar :title="$t('goodsdetail.title')" :background="$utypeprimary" :titleColor="$utitlecolor" :backColor="$utitlecolor">
            <view class="share-icon" slot="right" @click="handleInvite" v-if="!(platform == 'ios' && (systemInfo.is_audited == undefined || systemInfo.is_audited == '0'))">
				<image src="@/static/image/goods/share_icon.png" style="width:30rpx;height:30rpx;margin:auto;" mode="" />
			</view>
		 </navbar>
         <view class="banner">
            <u-swiper height="570" bgColor="#FFF" :list="goodInfo.banner_images.split(',')"></u-swiper>
        </view>
        <view class="header-box">
            <view class="price">
                {{$currency}}{{goodInfo.price.replace('.00','')}}
                <text class="reward">+{{$currency}}{{goodInfo.rewards}}/day</text>
            </view>
            <view class="group-buying">
                <image src="@/static/image/goods/person_icon.png" style="width:26rpx;height:27rpx;" mode="" />
                <view>{{$t('goodsdetail.groupbuy', {num: goodInfo.group_buy_num})}}</view>
            </view>
        </view>
        <view class="info-box">
            <view class="info-header">
                <view class="u-line-2 title">
                    {{goodInfo.name}}
                </view>
            </view>
            <view class="info-interests">
                <view class="info-interests-title">
                    {{$t('goodsdetail.interestTitle')}}
                </view>
                <view class="info-interests-box">
                    <view class="info-interests-content">
                        <view class="content-icon">
                            <image src="@/static/image/goods/rights_icon.png" mode="" />
                        </view>
                        <view>
                            {{$t('goodsdetail.interestContent1')}}
                        </view>
                    </view>
                    <view class="info-interests-content">
                        <view class="content-icon">
                            <image src="@/static/image/goods/rights_icon.png" mode="" />
                        </view>
                        <view>
                            {{$t('goodsdetail.interestContent2')}}
                        </view>
                    </view>
                    <view class="info-interests-content">
                        <view class="content-icon">
                            <image src="@/static/image/goods/rights_icon.png" mode="" />
                        </view>
                        <view>
                            {{$t('goodsdetail.interestContent3',{num: goodInfo.win_people_num})}}
                        </view>
                    </view>
                    <view class="info-interests-content">
                        <view class="content-icon">
                            <image src="@/static/image/goods/rights_icon.png" mode="" />
                        </view>
                        <view>
                            {{$t('goodsdetail.interestContent4',{num: goodInfo.cash_people_num,price: $currency + goodInfo.reward})}}
                        </view>
                    </view>
                </view>
            </view>
            <view class="info-income">
                <view class="u-flex">
                    <view class="item">
                        {{$currency}}{{otherInfo.today_income}}
                        <view>{{$t('goodsdetail.incometoday')}}</view>
                    </view>
                    <view class="item">
                        {{otherInfo.today_buy_num}}/{{otherInfo.daily_buy_num}}
                        <view>{{$t('goodsdetail.times')}}</view>
                    </view>
                </view>
                <template v-if="otherInfo.countdown > 0">
                    <view style="padding:0 20rpx;margin-top: 30rpx;text-align:center;align-items:center;position:relative;" @click="onTipsShow">
                        {{$t('new.helptitle')}}
                        <image class="help-icon" ref="helpicon" src="@/static/image/goods/point_icon.png" style="width: 22rpx;height:22rpx;margin-left:10rpx;" mode="" />
                        <view class="innerText fade-in" :style="{right:helpRight-80+ 'px'}" v-if="tipsShow">
                            <text :style="[]">{{$t('new.helpcontent')}}</text>
                            <view style="width: 30rpx;height: 30rpx;transform:rotate(45deg);position:absolute;background:#fff;border-left:1rpx solid #efefef;border-top:1rpx solid #efefef;top:-16rpx;right:18rpx;">

                            </view>
                        </view>
                    </view>
                    <view class="u-flex u-row-center" style="margin-top:20rpx;">
                        <view class="time-box hourmin">{{countTimestamp.split(':')[0]}}</view>
                        :
                        <view class="time-box hourmin">{{countTimestamp.split(':')[1]}}</view>
                        :
                        <view class="time-box second">{{countTimestamp.split(':')[2]}}</view>
                    </view>
                </template>
            </view>
            <view class="info-step">
                <view class="header">
                    <view class="circle"></view>
                    <view class="title">
                        {{$t('goodsdetail.buyingsteps')}}
                    </view>
                </view>
                <view class="inside">
                    <image src="@/static/image/goods/step-img.png" style="width:610rpx;height:355rpx;" mode="" />
                </view>
                <view class="view-more" @click="navTo('/pages/goods/step')">{{$t('goodsdetail.viewmore')}}</view>
            </view>
            <view class="buying">
                <view class="u-flex u-row-between" @click="navTo('./list',{id: goodId, categoryId:categoryId})">
                    <view style="color:#0F0F0E;font-weight:400;font-size:28rpx;">
                        {{$t('goodsdetail.buyingtitle', {num: recommendTotal})}}
                    </view>
                    <image src="@/static/image/goods/next_black.png" style="width: 13rpx;height:20rpx;" mode="" />
                </view>
                <view v-for="(item, index) in recommendList" :key="index">
                    <view style="text-align: center;border-bottom:1rpx solid #f2f2f2;
		                padding:40rpx 0;">
						<view class="list-item">
							<view style="position:relative;border-radius:50%;overflow:hidden;">
								<u-image :show-loading="false" class="list-avatar" :src="item.avatar" width="68rpx" height="68rpx" mode="" >
									<u-image slot="error" :show-loading="false" class="list-avatar" src="@/static/image/home/avatar.png" width="68rpx" height="68rpx" />
								</u-image>
							</view>
							<view>
								<view class="u-line-1" style="width:135rpx;font-size:28rpx;">{{item.nickname}}</view>
							</view>
							<view>
								<view>{{$t('goodsdetail.personleft',{num: 1})}}</view>
								<view style="margin-top: 2rpx;color: #2399FD;">Surplus {{timeFormat(item.end_time)}}</view>
							</view>
                            <view style="width:116rpx;height:60rpx;">
                                <overbtn btnText="Join" :fontSize="24" @btnAction="() => {group = true;type = 2;}" :propStyle="{width:'116rpx', height: '60rpx', background:$utypeprimary, color: '#C17C1C', border: 'none'}" btnType="overline"></overbtn>
                            </view>
						</view>
					</view>
                </view>
            </view>
            <view class="ratio" v-if="!(platform == 'ios' && (systemInfo.is_audited == undefined || systemInfo.is_audited == '0'))">
                <view class="u-flex u-row-between">
                    <view style="color:#0F0F0E;font-weight:400;font-size:28rpx;">
                        {{$t('goodsdetail.ratiotitle', {num: 387})}}
                    </view>
                </view>
                <view class="u-flex u-row-between" style="margin:30rpx 0;">
                    <view >
                        <view class="ratio-content">
                            {{teamRate[0].fee}}%
                        </view>
                        <view class="ratio-desc">
                            {{$t('goodsdetail.ratiodesc1')}}
                        </view>
                    </view>
                    <view >
                        <view class="ratio-content">
                            {{teamRate[1].fee}}%
                        </view>
                        <view class="ratio-desc">
                            {{$t('goodsdetail.ratiodesc2')}}
                        </view>
                    </view>
                    <view >
                        <view class="ratio-content">
                            {{teamRate[2].fee}}%
                        </view>
                        <view class="ratio-desc">
                            {{$t('goodsdetail.ratiodesc3')}}
                        </view>
                    </view>
                </view>
                <view class="commission" >
                    {{$t('goodsdetail.commission')}}
                    <span style="font-size:34rpx;color:#FC3E32;">{{$currency}}{{otherInfo.myteam_today_commission}}</span>
                </view>
            </view>
        </view>
        <view style="color:#AAA;padding:10rpx 25rpx;" v-if="platform == 'ios' && (systemInfo.is_audited == undefined || systemInfo.is_audited == '0')">
            * Apple Inc. is not a sponsor or involved in the activity in any manner
        </view>
        <view class="more-box">
            <view class="more-title">
                <view class="more-line"></view>
                <view style="margin: 0 25rpx;">{{$t('goodsdetail.goodsdetails')}}</view>
                <view class="more-line"></view>
            </view>
            <view class="vhtml" v-html="goodInfo.content">
			</view>
        </view>
        <u-popup v-model="group" mode="bottom" closeable border-radius="20">
			<view style="font-size:36rpx;text-align:center;margin-top:30rpx;" v-if="type == 1">{{$t('goodsdetail.newgroup')}}</view>
			<view style="font-size:36rpx;text-align:center;margin-top:30rpx;" v-if="type == 2">{{$t('goodsdetail.directlygroup')}}</view>
            <view class="detail-info u-flex">
                <view style="width:250rpx;height:190rpx;margin-right:30rpx;">
                <image :src="goodInfo.cover_image" style="width:250rpx;height:190rpx;" mode="" />
                </view>
                <view style="flex: 1;">
                    <view class="u-line-2">
                        {{goodInfo.name}}
                    </view>
                    <view class="u-flex u-row-between" style="margin-top:20rpx;">
                        <view style="color:#FC3E32;font-size:36rpx;">{{$currency}}{{goodInfo.price}}</view>
                        <view style="color:#AAA;">x1</view>
                    </view> 
                    <view style="color:#FC3E32;font-size:26rpx;margin-top:20rpx;">{{$t('new.paydesc')}}</view>
                </view>
            </view>
            <view style="width: 750rpx;height: 20rpx;background:#F6F6F6;"></view>
            <view class="detail-info">
                <!-- <view class="detail-item u-flex u-row-between">
                    <view class="label">{{$t('goodsdetail.orderno')}}</view>
                    <view class="value">123456789</view>
                </view> -->
                <!-- <view class="detail-item u-flex u-row-between">
                    <view class="label">{{$t('goodsdetail.tradingtime')}}</view>
                    <view class="value">123456789</view>
                </view>
                <view class="detail-item u-flex u-row-between">
                    <view class="label">{{$t('goodsdetail.amount')}}</view>
                    <view class="value">123456789</view>
                </view> -->
                <view class="detail-item u-flex u-row-between" v-if="type == 1">
                    <view class="label">{{$t('goodsdetail.bonus')}}</view>
                    <view class="value">{{otherInfo.leader_bonus}}</view>
                </view>
                <view id="guide_1" :data-guide-text="$t('entry.goodguide2')">
                    <view class="detail-item u-flex u-row-between">
                        <view class="label">{{$t('goodsdetail.maxincome')}}</view>
                        <view class="value">{{goodInfo.buyback}}</view>
                    </view>
                    <view class="detail-item u-flex u-row-between">
                        <view class="label">{{$t('goodsdetail.minincome')}}</view>
                        <view class="value">{{goodInfo.reward}}</view>
                    </view>
                </view>
                <view class="detail-item u-flex u-row-between">
                    <view class="label">{{$t('goodsdetail.purchases')}}</view>
                    <view class="value">{{otherInfo.my_group_buying_num}}/{{otherInfo.group_buying_num}}</view>
                </view>
                <view class="detail-item u-flex u-row-between">
                    <view class="label">{{$t('goodsdetail.ordertoday')}}</view>
                    <view class="value">{{otherInfo.today_buy_num}}/{{otherInfo.daily_buy_num}}</view>
                </view>
                <view class="detail-item u-flex u-row-between" v-if="type == 1">
                    <view class="label">{{$t('goodsdetail.type')}}</view>
                    <view class="value">{{$t('goodsdetail.groupbuy', {num: goodInfo.group_buy_num})}}</view>
                </view>
            </view>
            <template v-if="otherInfo.countdown > 0">
                <view style="margin-top: 30rpx;text-align:center;align-items:center;position:relative;">
                    Remaining time to place another order today
                </view>
                <view class="u-flex u-row-center" style="margin-top:20rpx;">
                    <view class="time-box hourmin">{{countTimestamp.split(':')[0]}}</view>
                    :
                    <view class="time-box hourmin">{{countTimestamp.split(':')[1]}}</view>
                    :
                    <view class="time-box second">{{countTimestamp.split(':')[2]}}</view>
                </view>
            </template>
            <!-- <view style="color:#AAAAAA;text-align:center;">
                {{$t('goodsdetail.desc',{num:goodInfo.win_must_num})}}
            </view> -->
            <view id="guide_2" :data-guide-text="$t('entry.goodguide3')" style="margin-top:20rpx;border-radius:20rpx 20rpx 0 0;padding: 20rpx;text-align:center;" :style="{background: $utypeprimary}" @click="paynow">
                <view style="color:#fff;font-size:32rpx;margin-bottom:12rpx;font-weight:400;">{{$t('goodsdetail.paynow', {price: $currency + goodInfo.price})}}</view>
                <view style="color:#fff;font-size:26rpx;">{{$t('new.paydesc')}}</view>
            </view>
		</u-popup>
        <u-mask :show="purchaseModalShow" :zoom="false">
            <view style="display:flex;flex-direction:column;justify-content:center;height:100%;">
                <view class="purchase-box">
                    <view class="purchase-title">
                        {{orderInfo.is_win?$t('goodsdetail.successed'):$t('goodsdetail.failed')}}
                        <image @click="purchaseModalShow=false" src="@/static/image/goods/close_icon.png" style="width:28rpx;height:28rpx;position:absolute;top:0rpx;right:0rpx;padding:20rpx;" mode="" />
                    </view>
                    <view class="purchase-content">
                        <view class="purchase-info u-flex" v-if="orderInfo.is_win">
                            <view style="width:250rpx;height:190rpx;margin-right:30rpx;">
                            <image :src="goodInfo.cover_image" style="width:250rpx;height:190rpx;" mode="" />
                            </view>
                            <view style="flex:1;">
                                <view class="u-line-2">
                                    {{goodInfo.name}}
                                </view>
                                <view class="u-flex u-row-between" style="margin-top:40rpx;width: 100%;">
                                    <view style="color:#FC3E32;font-size:36rpx;">{{$currency}}{{goodInfo.price}}</view>
                                    <view style="color:#AAA;">x1</view>
                                </view> 
                            </view>
                        </view>
                        <view class="purchase-info" v-if="false">
                            <view style="font-size: 28rpx;color:#AAA;">
                                <span style="vertical-align:middle;">
                                    <image src="@/static/image/goods/time_icon.png" style="width:30rpx;height:30rpx;margin-top:4rpx;" mode="" />
                                </span>
                                {{$t('goodsdetail.progresstitle', {num1: 5, num2: 3})}}
                            </view>
                            <view class="u-flex u-row-start" style="margin-top:20rpx;">
                                <view style="margin-right: 10rpx;color:#AAA;">{{$t('goodsdetail.remaindesc')}}</view>
                                <view class="time-box hourmin">{{0}}</view>
                                :
                                <view class="time-box hourmin">{{0}}</view>
                                :
                                <view class="time-box second">{{0}}</view>
                            </view>
                            <view class="u-flex" style="flex-wrap:wrap;margin-top:30rpx;">
                                <view style="position:relative;width: 20%;text-align:center;" v-for="(item, index) in 10" :key="index">
                                    <u-image :show-loading="false"  class="list-avatar" src="@/static/image/team/gift.png" style="margin:auto;" :class="{teamleader: index == 0}" width="90rpx" height="90rpx" mode="" >
                                        <u-image slot="error" :show-loading="false" class="list-avatar" src="@/static/image/home/avatar.png" width="90rpx" height="90rpx" />
                                    </u-image>
                                    <view class="u-line-1" style="width:90rpx;margin:auto;">playername</view>
                                    <view style="position:absolute;top:0;right:10rpx;min-width:31rpx;height:31rpx;" v-if="index == 0">
                                        <image src="@/static/image/goods/star_icon.png" style="width:31rpx;height:31rpx;" mode="" />
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="purchase-detail">
                            <view class="u-flex u-row-center" style="margin-bottom: 10rpx;">
                                <image src="@/static/image/goods/purchase_title_left.png" style="width:23rpx;height:21rpx;" mode="" />
                                <view style="margin: 0 15rpx;color:#878D9C;font-size:34rpx;">{{$t('goodsdetail.purchasedetailtitle')}}</view>
                                <image src="@/static/image/goods/purchase_title_left.png" style="width:23rpx;height:21rpx;transform: rotateY(180deg);--webkit-transform:rotateY(180deg);" mode="" />
                            </view>
                            <view id="guide_3" :data-guide-text="$t('entry.goodguide4')" >
                                <view class="detail-item u-flex u-row-between" >
                                    <view class="label">{{$t('goodsdetail.grouppurchasegoods')}}</view>
                                    <view class="value">x{{orderInfo.is_win?1:0}}</view>
                                </view>
                                <view class="detail-item u-flex u-row-between" v-if="Number(orderInfo.earnings) > 0">
                                    <view class="label">{{$t('goodsdetail.cashincome')}}</view>
                                    <view class="value">{{$currency}}{{orderInfo.earnings}}</view>
                                </view>
                            </view>
                            <view class="detail-item u-flex u-row-between" v-if="type == 1">
                                <view class="label">{{$t('goodsdetail.bonus')}}</view>
                                <view class="value">{{$currency}}{{otherInfo.leader_bonus}}</view>
                            </view>
                        </view>
                        <view style="padding: 0 30rpx;font-size: 24rpx;color:#AAA;margin-top: 40rpx;">
                            <span style="vertical-align:middle;">
                                <image src="@/static/image/goods/point_icon.png" style="width:22rpx;height:22rpx;margin-top:4rpx;" mode="" />
                            </span>
                            {{orderInfo.is_win?$t('goodsdetail.faileddesc'):
                            $t('goodsdetail.faileddesc')}}
                        </view>
                        <view style="width:610rpx;height:90rpx;margin:50rpx auto 0 auto;">
                            <overbtn id="guide_4" :data-guide-text="$t('entry.goodguide5')" v-if="!orderInfo.is_win" :btnText="$t('common.confirm')" @btnAction="winConfirm" :fontSize="30" :propStyle="{width:'116rpx', height: '60rpx', color: '#0F0F0E', border: 'none'}" btnType="overline"></overbtn>
                            <overbtn v-if="orderInfo.is_win" :btnText="$t('goodsdetail.gowarehouse')" @btnAction="() => {winConfirm();navTo('/pages/warehouse/warehouse')}" :fontSize="30" :propStyle="{width:'116rpx', height: '60rpx', color: '#0F0F0E', border: 'none'}" btnType="overline"></overbtn>
                        </view>
                    </view>
                </view>
            </view>
		</u-mask>
        <u-mask :show="nomoneyShow" :zoom="false" class="flex-mask">
            <view class="nomoney-box">
                <view style="margin-top:240rpx;font-size:32rpx;">
                    {{$t('goodsdetail.notenoughtitle')}}
                </view>
                <view style="margin-top:40rpx;font-size:32rpx;color: #65676B;">
                    {{$t('goodsdetail.canincrease')}}
                </view>
                <view class="inside">
                    <view class="u-flex u-row-between">
                        <view class="label">{{$t('pay.TOP')}}</view>
                        <view class="go-btn">
                            <overbtn :btnText="$t('common.go')" @btnAction="navTo('/pages/pay/pay')" :fontSize="30" :propStyle="{width:'116rpx', height: '60rpx', color: '#0F0F0E', border: 'none'}" btnType="overline"></overbtn>
                        </view>
                    </view>
                    <view class="u-flex u-row-between" style="margin-top: 40rpx;">
                        <view class="label">{{$t('wode.invite')}}</view>
                        <view class="go-btn">
                            <overbtn :btnText="$t('common.go')" @btnAction="navTo('/pages/team/invite')" :fontSize="30" :propStyle="{width:'116rpx', height: '60rpx', color: '#0F0F0E', border: 'none'}" btnType="overline"></overbtn>
                        </view>
                    </view>
                </view>
            </view>
            <u-image :show-loading="false" width="60rpx" height="60rpx" style="margin:0 auto;margin-top: 40rpx;" src="@/static/image/icon_delete_tou.png" mode="aspectFit"
                @click="nomoneyShow = false"></u-image>
		</u-mask>
        <u-mask :show="nolongerShow" :zoom="false" class="flex-mask">
            <view class="nomoney-box">
                <view style="margin-top:240rpx;font-size:32rpx;">
                    {{$t('common.sorry')}}
                </view>
                <view style="margin-top:40rpx;font-size:32rpx;color: #65676B;">
                    {{$t('common.pleaseinstall')}}
                </view>
                <view class="inside">
                    <view class="u-flex u-row-between">
                        <view class="label">{{$t('common.installdirectly')}}</view>
                        <view class="go-btn">
                            <overbtn btnText="Download" @btnAction="downloadApk" :fontSize="30" :propStyle="{width:'116rpx', height: '60rpx', color: '#0F0F0E', border: 'none'}" btnType="overline"></overbtn>
                        </view>
                    </view>
                    <view class="u-flex u-row-between" style="margin-top: 40rpx;">
                        <view class="label">{{$t('common.gps')}}</view>
                        <view class="go-btn">
                            <overbtn :btnText="$t('common.go')" @btnAction="goToDownload" :fontSize="30" :propStyle="{width:'116rpx', height: '60rpx', color: '#0F0F0E', border: 'none'}" btnType="overline"></overbtn>
                        </view>
                    </view>
                </view>
            </view>
            <u-image :show-loading="false" width="60rpx" height="60rpx" style="margin:0 auto;margin-top: 40rpx;" src="@/static/image/icon_delete_tou.png" mode="aspectFit"
                @click="nolongerShow = false"></u-image>
		</u-mask>
        <u-mask :show="nogoodshow" :zoom="false" class="flex-mask">
            <view class="nogoods-box">
                <view style="font-size:32rpx;display:flex;align-items:center;padding:36rpx 0;margin:0 45rpx;border-bottom: 2rpx solid #F6F6F6;">
                    <view style="height:29rpx;line-height:29rpx;flex:1;padding-left:29rpx;font-size:36rpx;">Tips</view>
                    <image src="@/static/image/wrong.png" @click="nogoodshow = false" style="width: 29rpx;height:29rpx;" mode="" />
                </view>
                <image src="@/static/image/goods/noGoods.png" style="margin-top:40rpx;width: 140rpx;height:100rpx;" mode="" />
                <view style="margin-top:40rpx;font-size:32rpx;padding:0 40rpx;font-weight:500;">
                   {{$t('goodsdetail.replenishing')}}
                </view>
                <view class="inside">
                    <view class="label">{{$t('goodsdetail.followgoods')}}</view>
                    <view class="u-flex u-row-between" style="margin-top: 40rpx;">
                        <view class="item" v-for="(item, index) in noGoodsInfo" :key="index" @click="redTo('../goods/good', {id: item.list[0].id,categoryid: item.id})">
							<view class="item-show">
								<image :src="item.list[0]?item.list[0].cover_image:''" mode=""></image>
							</view>
                           <view class="header-price">
                                <image src="@/static/image/home/angle_icon.png" style="width:18rpx; height:16rpx;" mode="" />
                                <view>
                                    +{{$currency}}{{item.money}}{{$t('home.perday')}}
                                </view>
                            </view>
							<view class="item-text">
								<view class="item-name u-line-1" style="font-size:24rpx;word-break:break-word;">{{item.list[0]?item.list[0].name:''}}</view>
								<view class="item-count">
									{{ $currency }}{{ item.price }}
								</view>
								<view class="remain_bg">
									<image src="@/static/image/home/person_icon.png" style="width: 18rpx;height:17rpx;margin-right:11rpx;" mode="" />
									<view>{{ $t('home.persongroup', {num:item.list[0]?item.list[0].group_buy_num:''}) }}</view>
								</view>
							</view>
						</view>
                    </view>
                </view>
            </view>
		</u-mask>

        <u-mask :show="noVipOpen" :mask-click-able="false" :zoom="false">
			<view class="showRegister-img" >
				<u-image :show-loading="false" width="60rpx" height="60rpx" style="margin-left:545rpx;" src="@/static/image/icon_delete_tou.png" mode="aspectFit"
					@click="noVipOpen = false"></u-image>
					<view style="background:#FFF;border-radius: 20rpx;margin-top:20rpx;">
						<view class="register-box">
							<view style="font-size:28rpx;margin-top: 35rpx;text-align:start;">
								{{$t('new.novip1')}}<text style="color: #FC3E32;">{{unableOpen.next_level}}</text>{{$t('new.novip2')}}
							</view>
							<view class="u-flex u-row-around" style="font-size:30rpx;margin-top: 80rpx;" :style="{color:$utypeprimary}">
								<view>{{unableOpen.mylevel}}</view>
                                <view style="margin:0 20rpx;background:#DBDBDB;flex:1;border-radius:5rpx;overflow:hidden;height:10rpx;">
                                    <view :style="{background:$utypeprimary,width:Number(userInfo.money)/(Number(userInfo.money)+Number(unableOpen.must_money))*100+'%'}" style="height:10rpx;"></view>
                                </view>
                                <view>{{unableOpen.next_level}}</view>
							</view>
							<view style="font-size:30rpx;color:#CBCBCB;margin-top: 55rpx;text-align:start;">
								{{$t('new.needvip1')}}<text style="color:#FC3E32; ">{{unableOpen.must_money}}</text>{{$t('new.needvip2')}}
							</view>
							<view style="width: 550rpx;margin:45rpx auto 0 auto;">
								<overbtn :btnText="$t('pay.TOP')" @btnAction="navTo('/pages/pay/pay')" :fontSize="30" :propStyle="{borderRadius:'10rpx',width:'430rpx', height: '90rpx', color: '#0F0F0E', border: 'none'}" btnType="overline"></overbtn>
							</view>
						</view>
					</view>
			</view>
		</u-mask>

        <u-mask :show="notimesShow" :zoom="false" class="flex-mask">
            <view class="notimes-box">
                <view style="margin-top:300rpx;font-size:32rpx;color:#65676B;padding: 0 40rpx;">
                    {{$t('goodsdetail.notimes')}}
                </view>
                <view class="inside">
                    <view class="u-flex u-row-between">
                        <view class="label">{{$t('team.mylevel')}}</view>
                        <view class="content">
                            {{$levelArr[userInfo.level]}}
                        </view>
                    </view>
                    <view class="u-flex u-row-between" style="margin-top: 40rpx;">
                        <view class="label">{{$t('goodsdetail.create')}}</view>
                        <view class="content">
                            {{$t('goodsdetail.timesperday', {num: otherInfo.group_buying_num})}}
                        </view>
                    </view>
                </view>
                <view style="margin-top:30rpx;font-size:26rpx;padding: 0 40rpx;">
                    {{$t('goodsdetail.updgrading')}}
                    <text style="color:#FC3E32;font-size:30rpx;">{{$t('goodsdetail.timesperday', {num: otherInfo.next_open_group_num})}}</text>
                </view>
                <view class="u-flex u-row-between" style="padding: 0 30rpx;margin-top: 50rpx">
                    <view style="width: 290rpx;" v-if="!(platform == 'ios' && (systemInfo.is_audited == undefined || systemInfo.is_audited == '0'))">
                        <overbtn :btnText="$t('goodsdetail.viplevel')" @btnAction="navTo('/pages/member/member')" :fontSize="30" :propStyle="{width:'116rpx', height: '60rpx', color: $utypeprimary, background: '#0F0F0E', border: 'none'}" btnType="overline"></overbtn>
                    </view>
                    <view style="width: 290rpx;">
                        <overbtn :btnText="$t('pay.TOP')" @btnAction="navTo('/pages/pay/pay')" :fontSize="30" :propStyle="{width:'116rpx', height: '60rpx', color: '#0F0F0E', border: 'none'}" btnType="overline"></overbtn>
                    </view>
                </view>
            </view>
            <u-image :show-loading="false" width="60rpx" height="60rpx" style="margin:0 auto;margin-top: 40rpx;" src="@/static/image/icon_delete_tou.png" mode="aspectFit"
                @click="notimesShow = false"></u-image>
		</u-mask>
        <u-mask :show="svgaShow" :zoom="false" class="flex-mask">
            <view class="progress-box">

                <view style="margin-top: 40rpx;">{{$t('goodsdetail.groupprogress')}}</view>
                <view class="avatar-box">
                    <!-- <view>
                    </view> -->
                    <view style="width:20%;height:90rpx;">
                        <mloadingavatar v-if="!waiting[0].time"></mloadingavatar>
                        <image class="scale-up-center" :src="waiting[0].src" mode="" style="width:90rpx;height:90rpx;border-radius:50%;" v-else/>
                    </view>
                    <view v-for="(item, index) in 4" style="width:20%;height:90rpx;margin:24rpx 0;">
                        <mloadingavatar v-if="!waiting[item].time"></mloadingavatar>
                        <image class="scale-up-center" :src="waiting[item].src" mode="" style="width:90rpx;height:90rpx;border-radius:50%;" v-else/>
                    </view>
                </view>
                <view class="u-flex u-row-center progress-text">
                    <image src="@/static/image/goods/renshu.png" style="width:30rpx;height:30rpx;margin-right:12rpx;" mode="" />
                    <view >{{currentProgress}}/{{goodInfo.group_buy_num}}</view>
                </view>
                <view class="progress-line scale-in-hor-left" v-if="svgaShow">
                </view>
                <div id="demoCanvas"></div>
            </view>
		</u-mask>
        <u-mask :show="newsvgaShow" :zoom="false" class="flex-mask">
            <view class="reward-box">
                <div id="rewardsvga"></div>
                <view class="under-box">
                    <view class="reward-text">
                        {{$currency + orderInfo.earnings}}
                    </view>
                    <view class="reward-btn" @click="onBoxConfirm">
                        Ok
                    </view>
                </view>
            </view>
		</u-mask>
        <view class="btn">
            <view class="new" v-if="unableOpen.must_money">
                <view class="price" @click="onPayClick(1)">
                    {{$t('new.abovelevel', {level: unableOpen.next_level})}}
                </view>
                <view class="align-center-vertical">
                    {{$t('goodsdetail.newgroup')}}
                </view>
            </view>
            <view class="new" v-else>
                <view class="price" @click="onPayClick(1)">
                    <text class="reward">+{{$currency}}{{(Number(goodInfo.reward)+Number(otherInfo.leader_bonus)).toFixed(2)}}/time</text>
                </view>
                <view class="align-center-vertical">
                    {{$t('goodsdetail.newgroup')}}
                </view>
            </view>
            <view class="directly" id="guide_0" :data-guide-text="$t('entry.goodguide1')" @click="onPayClick(2)">
                <view class="price">
                     <text class="reward">+{{$currency}}{{goodInfo.reward}}/time</text>
                </view>
                <view class="align-center-vertical">
                    {{$t('goodsdetail.directlygroup')}}
                </view>
            </view>
        </view>
        <mask-guide-uni ref="maskGuide" nextBtnPosition="bottom" :startFrom="0" @guideClose="() => {}" @nextGuide="navTo()">
		</mask-guide-uni>
        <view :prop="start" :change:prop="pixi.onStart"></view>
        <view :prop="rewardStart" :change:prop="pixi.onRewardStart"></view>
        <view :prop="clearPixi" :change:prop="pixi.clear"></view>
        <view :prop="audioCtx" :change:prop="pixi.audioCtx"></view>
        <!-- <view :prop="addOne" :change:prop="pixi.onAddOne"></view>
        <view :prop="end" :change:prop="pixi.onEnd"></view> -->
        <sharepopup ref="pop" :showPopup="showpop" shareType="3"></sharepopup>
	</view>
</template>

<script module="pixi" lang="renderjs">
	import SVGA from 'svgaplayerweb';

	export default {
		data() {
			return {
                player: '',
                parser: '',
                rewardParser: '',
                rewardPlayer: '',
                item: ''
			}
		},
		watch: {
		},
		created(option) {
		},
		mounted() {
            // let that = this;
			// setTimeout(() => {

                var player = new SVGA.Player('#demoCanvas');

                var parser = new SVGA.Parser('#demoCanvas'); // Must Provide same selector eg:#demoCanvas IF support IE6+
                this.player = player;
                this.parser = parser;

                var rewardPlayer = new SVGA.Player('#rewardsvga');

                var rewardParser = new SVGA.Parser('#rewardsvga'); // Must Provide same selector eg:#demoCanvas IF support IE6+
                this.rewardPlayer = rewardPlayer;
                this.rewardParser = rewardParser;

            //     parser.load('https://cdn.jsdelivr.net/gh/aixuxudemao/CDN@1.7/nike.svga', function(videoItem) {
            //         player.loops = 1;
            //         player.clearsAfterStop = false;
            //         that.item = videoItem;
            //         // player.setVideoItem(videoItem);
            //     })
            //     this.player = player;
            // }, 500);
		},
		methods: {
            onStart() {
                let that = this;
                that.parser.load('https://cdn.jsdelivr.net/gh/aixuxudemao/CDN@1.7/nike.svga', function(videoItem) {
                    that.player.loops = 1;
                    that.player.clearsAfterStop = false;
                    // player.setVideoItem(videoItem);
                    that.player.setVideoItem(videoItem);
                    that.player.startAnimation();
                    that.player.onFinished(() => {
                        setTimeout(() => {
                            that.player.clear();
                        }, 500);
                    })
                })
            },
            onRewardStart() {
                let that = this;
                that.rewardParser.load('https://fungrouping.oss-ap-south-1.aliyuncs.com/box_new.svga', function(videoItem) {
                    that.rewardPlayer.loops = 1;
                    that.rewardPlayer.clearsAfterStop = false;
                    that.rewardPlayer.setVideoItem(videoItem);
                    setTimeout(() => {
                        that.$ownerInstance.callMethod('playVoice', 'test')  
                    }, 1000);
                    that.rewardPlayer.startAnimation();
                })
            },
            clear() {
                this.rewardPlayer.clear();
            },
		}
	}
</script>

<script>
    // #ifdef APP-PLUS
	var appsFlyer = uni.requireNativePlugin("sn-appsflyer");
	// #endif
    import {
		goodsdetail,
        goodsdetailparam,
        addorder,
        buyerrecommend
	} from '@/api/goods.js'
    import {
		checkTime,
        countDown
	} from '@/utils/utils'
	export default {
		components: {
		},
		data() {
			return {
                helpRight: 0,
                noVipOpen: false,
                timeCount: '',
                countTimestamp: '00:00:00',
                tipsShow: false,
                showpop:false,
                group: false,
                type: 1,
                purchaseModalShow: false,
                goodId: '',
                categoryId: '',
                goodInfo: {banner_images: '',price: '0'},
                otherInfo: {mylevelrate: {},unable_open: {}},
                recommendList: [],
                recommendTotal: 0,
                orderInfo: {},
                rewardStart: false,
                start: false,
                addOne: false,
                end: false,
                svgaShow: false,
                newsvgaShow: false,
                currentTimestamp: 0,
                currentProgress: 0,
                loading:false,

                nomoneyShow: false,
                nolongerShow: false,
                notimesShow: false,
                nogoodshow:false,
                noGoodsInfo: [],

                waiting: [
                    {
                        time: false,
                        load: false,
                        src: ''
                    },
                    {
                        time: false,
                        load: false,
                        src: ''
                    },
                    {
                        time: false,
                        load: false,
                        src: ''
                    },
                    {
                        time: false,
                        load: false,
                        src: ''
                    },
                    {
                        time: false,
                        load: false,
                        src: ''
                    },
                ],
                audioCtx: null,
                myVoice: false,
                clearPixi: false
			}
		},
		onLoad(option) {
            this.goodId = option.id;
            this.categoryId = option.categoryid;
            this.load();
            this.loadOther();
            this.loadRecommend();
            this.loadAvatar();
            this.currentTimestamp = new Date().getTime()/1000;
            this.audioCtx = uni.createInnerAudioContext();
            this.audioCtx.src =
					'https://fungrouping.oss-ap-south-1.aliyuncs.com/497bf6f4f7e7e801f59a68d198c6a8d2.mp3';
		},
		onReady() {
            if (Object.keys(this.$store.getters.userInfo).length == 0) {
            } else {
                try {
                    // 获取本地存储中launchFlag标识
                    const value = uni.getStorageSync('guideFlag');
                    const islogin = this.$store.getters.userInfo.islogin
                    if (value || islogin == 2) {
                        // launchFlag=true直接跳转到首页
                    } else {
                        // launchFlag!=true显示引导页
                        this.$nextTick(() => {
                            this.onGuideShow();
                        })
                        uni.setStorage({ 
                            key: 'guideFlag', 
                            data: true, 
                            success: function () {
                                console.log('error时存储launchFlag');
                            } 
                        }); 
                    }
                } catch(e) { 
                    // error 
                    uni.setStorage({ 
                        key: 'guideFlag', 
                        data: true, 
                        success: function () {
                            console.log('error时存储launchFlag');
                        } 
                    }); 
                    this.$nextTick(() => {
                        this.onGuideShow();
                    })
                }
            }
		},
		onShow() {
		},
		computed: {
            teamRate() {
                return this.otherInfo.mylevelrate.reward_invite || [{},{},{}]
            },
            unableOpen() {
                return this.otherInfo.unable_open || {}
            },
            userInfo() {
                return this.$store.getters.userInfo || {}
            },
            systemInfo() {
				return this.$store.getters.systemInfo || {}
			},
			platform() {
				return this.$store.getters.platform || ''	
			},
		},
		watch: {
            myVoice(newValue) {
                console.log(this.audioCtx)
                this.audioCtx.play();
            }
		},
		methods: {
            onTipsShow() {
                uni.createSelectorQuery().in(this).select('.help-icon').boundingClientRect(data => {  
                    this.helpRight = data.right;
                    this.tipsShow = true;
                }).exec()
            },
            goToDownload() {
				window.location = this.systemInfo.android_url;
			},
            downloadApk() {
                window.location = this.systemInfo.app_version_1.update_url_and_file
            },
            loadAvatar() {
                let arr = []
                for (let i = 0; i < 5; i++) {
                    let num = this.rnd(3,489);
                    if (arr.indexOf(num) < 0) {
                        arr.push(num);
                    } else {
                        i--;
                    }
                }
                for (let i in this.waiting) {
                    if ( i == 0) {
                        this.waiting[i].src = this.userInfo.avatar;
                    } else {
                        this.waiting[i].src = `https://ind-test.runcopys.com/uploads/robotpic/${arr[i]}.jpg`;
                    }
                    this.waiting[i].time = false;
                    uni.getImageInfo({
                        src: this.waiting[i].src,
                        success:(res) => {
                            this.waiting[i].src = res.path
                        }
                    });
                }
            },
            onGuideShow() {
				// this.showReward = false;
				// this.maskGuide = true;
				this.$refs.maskGuide.start({
					textStyle:{
						fontSize: '28rpx',
					},
                    fixed: true,
                    angleStyle: {
						bottom: '-12rpx',
						right: '30rpx'
					},
					showNextButton: false
				})
			},
            navTo(val, data) {
				let param = '';
				if (data) {
					param = '?';
					for (let i in data) {
						param += `${i}=${data[i]}&`
					}
				}
				uni.navigateTo({
					url: val + param
				})
			},
            redTo(val, data) {
				let param = '';
				if (data) {
					param = '?';
					for (let i in data) {
						param += `${i}=${data[i]}&`
					}
				}
				uni.redirectTo({
					url: val + param
				})
			},
            onPayClick(val) {
                if (val == 1 && this.otherInfo.unable_open.must_money) {
                    this.noVipOpen = true;
                    return;
                }
                this.$refs.maskGuide.showGuide = false;
                this.group = true;
                this.type = val;
                this.tipsShow = false;
                this.$nextTick(() => {
                    setTimeout(() => {
                        this.$refs.maskGuide.nextGuide({
                            showPointer: false,
                            showNextButton: true, 
                            nextObj:{
                                showPointer: true,
                                showNextButton: false,
                            }
                        })
                    }, 500);
                })
            },
            winConfirm() {
                this.purchaseModalShow = false;
                this.$refs.maskGuide.nextGuide();
                this.$nextTick(() => {
                    this.$refs.maskGuide.startStatus = false;
                })
            },
            async load() {
                let result = await goodsdetail({
                    id: this.goodId
                })
                this.goodInfo = result;
                this.goodInfo.content = this.goodInfo.content.replace(/<img/g, "<img style='width:100vw'");
            },
            async loadOther() {
                let result = await goodsdetailparam({
                    category_id: this.categoryId
                })
                this.otherInfo = result;
                if (this.otherInfo.countdown > 0) {
                    let nowTime = new Date().getTime()/1000;
                    this.timeCount = setInterval(() => {
                        nowTime++
                        this.countTimestamp = countDown(this.otherInfo.countdown, nowTime)
                        this.$forceUpdate()
                        if (this.countTimestamp == '00:00:00') {
                            clearInterval(this.timeCount)
                            this.loadOther();
                        }
                    }, 1000)
                }
            },
            async loadRecommend() {
                let result = await buyerrecommend({
                    category_id: this.categoryId
                })
                this.recommendList = result.list;
                for (let i of this.recommendList) {
                   setInterval(() => {
                        i.end_time = Number(i.end_time) - 1;
                    }, 1000);
                }
                this.recommendTotal = result.number;
                
            },
            async paynow() {
                if (this.loading) {
                    return;
                }
                // if (this.platform == 'androidweb' ) {
                //     let times = uni.getStorageSync('newtimes') || 0;
                //     times++;
                //     uni.setStorageSync('newtimes', times)
                //     if (times > 2 || new Date(new Date(this.userInfo.jointime*1000).toLocaleDateString()).getTime() < new Date(new Date().toLocaleDateString()).getTime()) {
                //         this.group = false;
                //         this.loading = false;
                //         this.nolongerShow = true;
                //         return;
                //     }
                // }
                this.loading = true;
                this.$refs.maskGuide.showGuide = false;
                uni.showLoading({
                    mask: true
                });
                try {
                    let result = await addorder({
                        type: this.type,
                        amount: this.goodInfo.price,
                        good_id: this.goodInfo.id,
                        earnings: this.goodInfo.reward,
                        category_id: this.goodInfo.category_id
                    })
                    uni.hideLoading();
                    if (result.code && result.code == 9) {
                        this.group = false;
                        this.loading = false;
                        this.notimesShow = true;
                        return;
                    }
                    if (result.code && result.code == 10) {
                        this.group = false;
                        this.loading = false;
                        this.nomoneyShow = true;
                        return;
                    }
                    this.orderInfo = result.order_info;
                    this.orderInfo.is_win = result.is_win;
                    let that = this;
                    // #ifdef APP-PLUS
                    try {
                        appsFlyer.logEvent({
                                eventName: "af_purchase",
                                eventValues: {
                                    'af_content_type': 'group',
                                    'af_content_id': that.orderInfo.order_id,
                                }, // 事件数据
                            },
                            (e) => {
                                console.log(e)
                            }
                        );
                    } catch (error) {
                        console.log(error);
                    }
                    // #endif
                    this.group = false;
                    this.svgaShow = true;
                    let num = Number(this.goodInfo.group_buy_num);
                    this.currentProgress = 0;
                    this.loading = false;

                    let stepSec = 3500/num;

                    setTimeout(() => {
                        let count = 0;
                        let interval = setInterval(() => {
                            this.waiting[count].time = true;
                            if (count == 4) {
                                clearInterval(interval)
                            }
                            count++;
                        }, 600);
                        for (let i = 0,delay = 0; i < num; i++) {
                            
                            (function(j,de) {
                                    setTimeout(() => {
                                        that.currentProgress = j+1;
                                    }, delay);
                                    return;
                            })(i, delay)
                            delay += stepSec
                        }
                        setTimeout(() => {
                            this.start = !this.start;
                            setTimeout(() => {
                                this.onProgressDone();
                            }, 1000);
                        }, 4550);
                    }, 500);
                } catch (error) {
                    this.loading = false;
                    if (error.status == '1') {
                        this.group = false;
                        this.noGoodsInfo = error.data;
                        this.nogoodshow = true;
                    }
                }
                
                // this.purchaseModalShow = true;
            },
            rnd(n, m) {
				var random = Math.floor(Math.random() * (m - n + 1) + n);
				return random;
			},
            onProgressDone() {
                this.svgaShow = false;

                this.newsvgaShow = true;
                setTimeout(() => {
                    this.rewardStart = !this.rewardStart;
                }, 200);
            },
            onBoxConfirm() {
                this.newsvgaShow = false;
                this.clearPixi = !this.clearPixi;
                this.purchaseModalShow = true;
                this.$nextTick(() => {
                    this.loadAvatar();
                    setTimeout(() => {
                        this.$refs.maskGuide.nextGuide({
                            angleStyle:{
                                top: '-12rpx',
                                right: '32rpx'
                            },
                            showPointer: false,
                            showNextButton: true, 
                            nextObj:{
                                showPointer: true,
                                showNextButton: false,
                                angleStyle:{
                                    bottom: '-12rpx',
                                    left: '32rpx'
                                },
                            }
                        })
                    }, 500);
                })
                this.load();
                this.loadOther();
                this.loadRecommend();
                this.$store.dispatch('getUserInfo');
            },
            timeFormat(end_time) {
                let timestamp = Number(end_time) - Math.floor(this.currentTimestamp);
                return checkTime(parseInt(timestamp/60/60)) + ':' + checkTime(parseInt(timestamp/60%60)) + ':' + checkTime(timestamp%60);
            },
            handleInvite() {
				this.$refs.pop.open()
			},
            playVoice() {
                this.audioCtx.play();
            }
		},
		onHide() {
		},
		destroyed() {
		},
		onPullDownRefresh() {
		},
		onPageScroll(e) {
		},
	}
</script>

<style lang="scss" scoped>
    page {
        background: #F6F6F6 ;
    }
    // /deep/ .u-mask-show {
    //     display: flex;
    //     flex-direction: column;
    //     justify-content: center;
    // }
    .banner {
        width: 100%;
        // height: 450rpx;
        height: 570rpx;
        overflow: hidden;
        // margin-top: -88rpx;

        .banner-swiper {
            width: 100%;
            height: 100%;
        }
        /deep/ .u-swiper-indicator {
            right: 0!important;
        }
    }
    .share-icon {
        display: flex;
        justify-content: center;
        position: absolute;
        right: 34rpx;
        width: 120rpx;
        height: 38rpx;
    }
    .header-box {
        height: 112rpx;
        background: url(@/static/image/goods/good_header.png) no-repeat;
        background-size: 750rpx 112rpx;
        display: flex;
        align-items: center;
        padding-left: 24rpx;
        .price {
            color: #FFF;
            font-family: Alibaba PuHuiTi;//rubick;;
            font-size: 46rpx;
            width: 405rpx;
            text-align: center;
            display: flex;
            align-items: baseline;
            flex-direction: column;
            text {
                margin-left: 10rpx;
                color: #FFD9E0;
                font-family: rubick;
                font-size: 24rpx;
            }
        }
        .group-buying {
            color: #B45F15;
            font-size: 26rpx;
            text-align: center;
            flex:1;
        }
    }
    .info-box {
        padding: 20rpx 30rpx;
        background: #f6f6f6;
        .info-header {
            background: #FFF;
            border-radius: 20rpx;
            padding: 16rpx 20rpx 30rpx 20rpx;
            .title {
                color: #0F0F0E;
                font-size: 34rpx;
                font-weight: 400;
                line-height: 60rpx;
            }
            .price {
                margin-top: 28rpx;
                color: #FC3E32;
                font-size: 46rpx;
                font-weight: 500;
            }
            .desc {
                margin-top: 32rpx;
                display: flex;
                align-items: center;
                color: #65676B;
                font-size: 26rpx;
                image {
                    margin-left: 10rpx;
                    width: 25rpx;
                    height: 25rpx;
                }
            }
        }
        .info-interests {
            background: #FFF;
            margin-top: 20rpx;
            border-radius: 20rpx;
            padding: 30rpx 20rpx;
            .info-interests-title {
                font-weight: 400;
                font-size: 28rpx;
                color: #0F0F0E;
            }
            .info-interests-box {
                display: flex;
                flex-wrap: wrap;
            }
            .info-interests-content {
                width: 50%;
                display: flex;
                margin-top: 30rpx;
                font-size: 26rpx;
                font-weight: 300;
                color:#AAAAAA;
                .content-icon {
                    
                    width: 25rpx;
                    margin-right:14rpx; 
                    padding-top: 5rpx;
                }
                image {

                    width: 25rpx;
                    height: 25rpx;
                }
            }
        }
        .info-step {
            background: #FFF;
            margin-top: 20rpx;
            border-radius: 20rpx;
            padding: 30rpx 20rpx;
            .header {
                display: flex;
                align-items: center;
                .circle {
                    width: 32rpx;
                    height: 32rpx;
                    border-radius: 50%;
                    border: 6rpx solid #0F0F0E;
                }
                .title {
                    text-align: start;
                    margin-left: 14rpx;
                    font-size: 32rpx;
                    font-weight: 400;
                    flex:1;
                }
            }
            .inside {
                margin-top: 30rpx;
                background: #F6F6F6;
                border-radius: 10rpx;
                width:650rpx;
                padding: 30rpx 20rpx;
            }
            .view-more {
                margin-top: 24rpx;
                color: #1392FD;
                text-align: center;
            }
        }
        .info-income {
            border-radius: 20rpx 20rpx 0 0;
            margin-top: 20rpx;
            background: url(@/static/image/goods/today_bg.png) no-repeat;
            background-color: #FFC163;
            width: 690rpx;
            background-size: 100% 70rpx;
            padding-top: 110rpx;
            padding-bottom:20rpx;
            .item {
                text-align: center;
                width: 50%;
                color: #7A5421;
                font-size: 40rpx;
                font-weight: 500;
                view {
                    margin-top: 24rpx;
                    font-size: 34rpx;
                    font-weight: 400;
                }
            }
        }
        .buying {
            background: #FFF;
            margin-top: 20rpx;
            padding: 20rpx 20rpx 0 20rpx;
            border-radius: 20rpx;
            .list-item {
                color:#65676B;
                font-size:26rpx;
                .align-center-vertical{
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
                    flex-direction: column;
                }
                // margin-top:18rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
        }
        .ratio {
            background: #FFF;
            margin-top: 20rpx;
            padding: 20rpx 20rpx 30rpx 20rpx;
            border-radius: 20rpx;
            color: #0F0F0E;
            .ratio-content {
                text-align: center;
                font-size: 32rpx;
            }
            .ratio-desc {
                padding: 0 16rpx;
                text-align: center;
                color: #AAA;
            }
            .commission {
                background: url(@/static/image/goods/income_bg.png) no-repeat;
                width: 650rpx;
                height: 74rpx;
                line-height: 74rpx;
                color:#C17C1C;
                margin: auto;
                background-size: 100%;
                display: flex;
                align-items: center;
                justify-content: space-around;

            }
        }
    }
    .more-box {
        background: #F6F6F6;
        padding: 30rpx 30rpx 200rpx 30rpx;
        .more-title {
            display: flex;
            justify-content: center;
            align-items: center;
            color: #C17C1C;
            margin-bottom: 10rpx;
            .more-line {
                width: 120rpx;
                height: 2rpx;
                background: #C17C1C;
            }
        }
    }
    .btn {
        width: 710rpx;
        height: 120rpx;
        left: 20rpx;
        font-weight: 400;
        position:fixed;
        z-index: 999;
        bottom: 30rpx;
        display: flex;
        border-radius: 60rpx;
        overflow: hidden;
        text-align: center;
        .reward {
            margin-left:10rpx;
            font-size: 22rpx;
        }
        .price {
            font-size: 32rpx;
        }
        .new {
            padding: 12rpx 10rpx;
            width: 355rpx;
            background: #0F0F0E;
            color: #FFF;
            font-size: 26rpx;
        }
        .directly {
            padding: 12rpx 10rpx;
            width: 355rpx;
            background: $u-type-primary;
            color: #fff;
            font-size: 26rpx;
            border-radius: 0 60rpx 60rpx 0;
        }
        .align-center-vertical{
            height: 40rpx;
            display: flex;
            align-items: center;
            justify-content: space-around;
            flex-direction: column;
        }
    }
    .detail-info {
        padding: 40rpx;
        font-size: 30rpx;
        .detail-item {
            height: 66rpx;
            line-height: 66rpx;
            .label {
                color: #65676B;
            }
            .value {
                color: #0F0F0E;
            }
        }
    }
    .purchase-box {
		overflow: hidden;
		background: $u-type-primary;
		border-radius: 20rpx;
		width: 670rpx;
		margin:auto;
        .purchase-title {
            position: relative;
            height: 104rpx;
            line-height: 104rpx;
            color:#fff;
            font-size: 36rpx;
            text-align: center;
        }
        .purchase-content {
            position: relative;
            background: #FFF;
            padding-bottom: 50rpx;
            font-size: 30rpx;
            z-index: 1;
            .purchase-info {
                padding: 30rpx;
                .teamleader {
                    border:2rpx solid #FC3E32;
                    border-radius:50%!important;
                }
            }
            .purchase-detail {
                background: #F6F6F6;
                padding: 20rpx;
                margin: 10rpx 20rpx;
                border-radius: 20rpx;
                .detail-item {
                    line-height: 52rpx;
                    height: 52rpx;
                }
            }
        }
        .purchase-content:after {
            background: #FFF;
            width: 200%;
            position:absolute;
            height: 200rpx;
            left: -50%;
            top: -20rpx;
            z-index:-1;
            content: '';
            border-radius: 50% 50% 0 0;
        }
	}
    #demoCanvas {
		width: 100%;
		height: 60rpx;
	}
    .reward-box {
        position: relative;
        .under-box {
            text-align: center;
            position: absolute;
            z-index: 9999;
            width: 100%;
            top: 750rpx;
        }
        .reward-text {
            background: linear-gradient(60deg, #FBFBE0 0%, #F8F1AF 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 60rpx;
        }
        .reward-btn {
            margin: auto;
            margin-top: 40rpx;
            background: #FF8E20;
            color: #FFF;
            font-size: 40rpx;
            border-radius: 45rpx;
            width: 380rpx;
            height: 90rpx;
            line-height: 90rpx;
        }
    }
    #rewardsvga {
		width: 100%;
		height: 1334rpx;
        margin-top: -200rpx;
	}
    .progress-box {
        border-radius: 20rpx;
        background:#FFF;
        width: 670rpx;
        margin: 0 auto;
        font-size: 38rpx;
        color: #000;
        font-weight: 400;
        text-align: center;
        position: relative;
        overflow: hidden;
        .avatar-box {
            margin-top: 50rpx;
            padding: 0 12rpx;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: start;
        }
        .progress-line {
            background: $u-type-primary;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 670rpx;
            height: 22rpx;
        }
    }
    .progress-text {
        margin: 30rpx 0;
        font-size: 42rpx;
    }
    .vhtml {
        overflow: hidden;
        img {
            width: 100%;
        }
    }
    .flex-mask {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .nomoney-box {
        overflow: hidden;
        margin: 0 auto;
        width: 670rpx;
        height: 664rpx;
        background: url(@/static/image/goods/nomoney_bg.png) no-repeat;
        background-size: 100%;
        text-align: center;
        .inside {
            margin:auto;
            margin-top: 30rpx;
            background: #F6F6F6;
            border-radius: 20rpx;
            width:610rpx;
            padding: 40rpx 30rpx;
            .label {
                color: #65676B;
                font-size: 32rpx;
            }
            .go-btn {
                height: 60rpx;
                width: 160rpx;
            }
        }
    }
    .nogoods-box {
        overflow: hidden;
        margin: 0 auto;
        width: 670rpx;
        background: #FFFFFF;
        border-radius: 20rpx;
        background-size: 100%;
        text-align: center;
        .inside {
            
            margin:auto;
            margin-top: 30rpx;
            margin-bottom: 30rpx;
            background: #F6F6F6;
            border-radius: 20rpx;
            width:610rpx;
            padding: 40rpx 30rpx;
            .label {
                color: #65676B;
                font-size: 32rpx;
            }
            .go-btn {
                height: 60rpx;
                width: 160rpx;
            }
        }
        .header-price {
            font-weight: 500;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #FC3E32;
            font-size: 32rpx;
        }
        .item {
            position: relative;
            border-radius: 15rpx;
            background-color: #fff;
            border: 1rpx solid #C17C1C;
            width: 250rpx;
            margin: 0 10rpx;
            opacity: 1;

            .item-show {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 190rpx;
                position: relative;
                // background-color: #fff;

                .item-show-prize {
                    white-space: nowrap;
                    width: 184rpx;
                    height: 42rpx;
                    opacity: 1;
                    background: #90b9ff;
                    border-radius: 20rpx 20rpx 0rpx 0rpx;
                    line-height: 42rpx;
                    font-size: 24rpx;
                    font-family: Roboto, Roboto-Medium;
                    font-weight: 500;
                    text-align: LEFT;
                    color: #ffffff;
                    text-align: center;
                    position: absolute;
                    bottom: -2rpx;
                    z-index: 970;
                }

                image {
                    z-index: 99;
                    // width: 160rpx;
                    // height: 160rpx;
                    max-width: 250rpx;
                    max-height: 190rpx;
                    // margin-top: -62rpx;
                    opacity: 1;
                    border-radius: 15rpx 15rpx 0 0;
                    // box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(142, 164, 212, 0.50);
                }
            }

            .item-text {
                display: flex;
                flex-direction: column;
                width: 100%;
                // height: 106rpx;
                padding: 12rpx 0 12rpx 16rpx;
                border-top: none;
                border-radius: 0 0 20rpx 20rpx;

                .item-name {
                    width: 100%;
                    font-size: 28rpx;
                    font-family: Roboto, Roboto-Medium;
                    font-weight: bold;
                    margin-top: 6rpx;
                }

                .item-num {
                    font-size: 28rpx;
                    color: #FC3E32;
                    font-family: DIN, DIN-Regular;
                    font-weight: 400;
                }

                .item-count {
                    margin-top: 6rpx;
                    font-size: 32rpx;
                    font-family: DIN, DIN-Medium;
                    font-weight: bold;
                    // color: #b9b9b9;
                    color: #FC3E32;
                }
                .remain_bg {
                    display: flex;
                    font-size: 24rpx;
                    color:#AAA;
                    height: 34rpx;
                    line-height: 36rpx;
                    // background: url(@/static/image/home/remain_bg.png) no-repeat;
                    background-size: 100% 100%;
                    align-items: center;
                }

                .item-line {
                    width: 100%;
                    margin: -8rpx 20rpx;
                }
            }
        }
    }
    .notimes-box {
        overflow: hidden;
        margin: 0 auto;
        width: 670rpx;
        height: 952rpx;
        background: url(@/static/image/goods/notimes_bg.png) no-repeat;
        background-size: 100%;
        text-align: center;
        .inside {
            margin:auto;
            margin-top: 30rpx;
            background: #F6F6F6;
            border-radius: 20rpx;
            width:610rpx;
            padding: 40rpx 30rpx;
            .label {
                color: #65676B;
                font-size: 32rpx;
            }
            .content {
                color: #2399FD;
                font-size: 30rpx;
            }
        }
    }
    .innerText {
		border: 1px solid #efefef;
		color: #0F0F0E;
		position: absolute;
		z-index: 99999;
		font-size: 28rpx;
		letter-spacing: 2rpx;
		background: #fff;
		width:400rpx;
		word-break: break-word;
		border-radius: 20rpx;
		padding: 32rpx 24rpx;
		top: 90rpx;
	}
    .time-box {
                color: #fff;
                width: 36rpx;
                height: 34rpx;
                margin:0 4rpx;
                text-align: center;
                font-size: 24rpx;
                line-height: 34rpx;
                color: #fff;
                border-radius: 8rpx;
            }
            .hourmin {
                background: #0F0F0E;
            }
            .second {
                background: #FC3E32;
            }
.scale-up-center {
	-webkit-animation: scale-up-center 0.5s cubic-bezier(0.680, -0.550, 0.265, 1.550) both;
	        animation: scale-up-center 0.5s cubic-bezier(0.680, -0.550, 0.265, 1.550) both;
}
    	@-webkit-keyframes scale-up-center {
	0% {
		-webkit-transform: scale(0);
				transform: scale(0);
        -webkit-filter: blur(40rpx);
                filter: blur(40rpx);
        background: #ECECEC;
	}
	100% {
		-webkit-transform: scale(1);
				transform: scale(1);
-webkit-filter: blur(0);
                filter: blur(0);
            background: transparent;
	}
	}
	@keyframes scale-up-center {
	0% {
		-webkit-transform: scale(0);
				transform: scale(0);
-webkit-filter: blur(40rpx);
                filter: blur(40rpx);
                background: #ECECEC;
	}
	100% {
		-webkit-transform: scale(1);
				transform: scale(1);
                    -webkit-filter: blur(0);
            filter: blur(0);
            background: transparent;
	}
	}
.scale-in-hor-left {
	-webkit-animation: scale-in-hor-left 5s ease-in-out both;
	        animation: scale-in-hor-left 5s ease-in-out both;
}
/* ----------------------------------------------
 * Generated by Animista on 2022-9-29 16:35:58
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-in-hor-left
 * ----------------------------------------
 */
@-webkit-keyframes scale-in-hor-left {
  0% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    opacity: 1;
  }
  70% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    opacity: 1;
  }
  71% {
    -webkit-transform-origin: center center;
        transform-origin: center center;
  }
  100% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);

    opacity: 1;
  }
}
@keyframes scale-in-hor-left {
  0% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    opacity: 1;
  }
  70% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    opacity: 1;
  }
  71% {
    -webkit-transform-origin: center center;
        transform-origin: center center;
  }
  100% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    opacity: 1;
  }
}

.fade-in {
	-webkit-animation: fade-in 0.7s 3.7s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in 0.7s 3.7s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2022-9-25 16:21:40
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation fade-in
 * ----------------------------------------
 */
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


.showRegister-img {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		.showRecomm-img-close {
			margin-top: 10rpx;
		}
		.register-box {
			text-align: center;
			width: 610rpx;
			background: linear-gradient(180deg, rgba(255, 109, 27, .3) 0%, rgba(255, 109, 27, .1) 10%, #fff 100%);
			background-size: 610rpx ;
			background-position: center top;
			overflow: hidden;
			border-radius: 20rpx;
			padding: 0 20rpx 20rpx 20rpx;
			
		}
	}
</style>
